<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		<style>
		/*  1.画圆形
		     2.画正三角形
			 思路1：   html    div元素
			           css     倒角，必须要有边框
			 思路2：   html    div元素  #triangle
			           css    斜边
					          不设置宽高
							  左边框：50像素实线红色
							  右边框：50像素实线蓝色
							  下边框：50像素实线黄色、透明度
		     */
		      /* 1.画圆 */
			   div#circle{
				   width: 200px;
				   height: 200px;
				   border: 1px solid red ;
				   border-radius: 50%;
				   /* 边框阴影属性 */
				   box-shadow: 5px 5px 50px 50px red inset;
			   }
			   /* 2.正三角形 */
			   div#triangle{
				   width: 0px;
				   /* 
				   border-left: 50px solid transparent;
				   border-right: 50px solid transparent;
				   border-top: 50px solid rgba(0, 0, 225, .3); */
				   border: 50px solid transparent;
				   /* border-top-color: rgba(0, 0, 225, .3); */
				   border-left-color: rgba(0, 0, 225, .3);;  
			   }
			   input{
				   outline: 1px solid red;
				  outline: 0; /*  去掉边框效果，统配选择器中*/
			   }
			
			
		   </style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		文本框：<input type="text">
	</body>
</html>